* {
    margin: 0;
    list-style: none;
}

body {
    background-color: #F1E1FF;
}

.wrapper {
    max-width: 1000px;
    margin: 80px auto;
}

.wrapper li {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 20px;
    display: inline-block;
    perspective: 300px;
}

.picBox {
    position: absolute;
    /* top: 0; */
    /* right: 0; */
    /* bottom: 0; */
    /* left: 0;  */
    height: 180px;
    width: 180px;
    transform-style: preserve-3d;
    transform-origin: 50% 50% -90px;
    animation: 2000ms ease-out 0ms 1 normal forwards;
    /* forwards则是停在动画最后的的那个画面   */
}

.show,
.hide {
    position: absolute;
    /* top: 0;
    right: 0;
    bottom: 0;
    left: 0; */
    height: 180px;
    width: 180px;
}

.hide {
    color: #fff;
    background-color: #000;
    text-align: center;
    line-height: 180px;
    transform: translate3d(0, 0, -1px);
    /* 3D空间内移动一个元素的位置 */
}

.in-top .hide,
.out-top .hide {
    transform-origin: 0% 100%;
    transform: translate3d(0, -100%, 0) rotate3d(1, 0, 0, 90deg);
}

.in-top .picBox {
    animation-name: in-top;
    animation-play-state: running;
}

.out-top .picBox {
    animation-name: out-top;
    animation-play-state: running;
}

@keyframes in-top {
    from {
        transform: rotate3d(0, 0, 0, 0deg)
    }
    to {
        transform: rotate3d(-1, 0, 0, 90deg)
    }
}

@keyframes out-top {
    from {
        transform: rotate3d(-1, 0, 0, 90deg)
    }
    to {
        transform: rotate3d(0, 0, 0, 0deg)
    }
}

.in-right .hide,
.out-right .hide {
    transform-origin: 0% 0%;
    transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 90deg);
}

.in-right .picBox {
    animation-name: in-right;
    animation-play-state: running;
}

.out-right .picBox {
    animation-name: out-right;
    animation-play-state: running;
}

@keyframes in-right {
    from {
        transform: rotate3d(0, 0, 0, 0deg)
    }
    to {
        transform: rotate3d(0, -1, 0, 90deg)
    }
}

@keyframes out-right {
    from {
        transform: rotate3d(0, -1, 0, 90deg)
    }
    to {
        transform: rotate3d(0, 0, 0, 0deg)
    }
}

.in-bottom .hide,
.out-bottom .hide {
    transform-origin: 0% 0%;
    transform: translate3d(0, 100%, 0) rotate3d(-1, 0, 0, 90deg);
}

.in-bottom .picBox {
    animation-name: in-bottom;
    animation-play-state: running;
}

.out-bottom .picBox {
    animation-name: out-bottom;
    animation-play-state: running;
}

@keyframes in-bottom {
    from {
        transform: rotate3d(0, 0, 0, 0deg)
    }
    to {
        transform: rotate3d(1, 0, 0, 90deg)
    }
}

@keyframes out-bottom {
    from {
        transform: rotate3d(1, 0, 0, 90deg)
    }
    to {
        transform: rotate3d(0, 0, 0, 0deg)
    }
}

.in-left .hide,
.out-left .hide {
    transform-origin: 100% 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, -1, 0, 90deg);
}

.in-left .picBox {
    animation-name: in-left;
    animation-play-state: running;
}

.out-left .picBox {
    animation-name: out-left;
    animation-play-state: running;
}

@keyframes in-left {
    from {
        transform: rotate3d(0, 0, 0, 0deg)
    }
    to {
        transform: rotate3d(0, 1, 0, 90deg)
    }
}

@keyframes out-left {
    from {
        transform: rotate3d(0, 1, 0, 90deg)
    }
    to {
        transform: rotate3d(0, 0, 0, 0deg)
    }
}